function drawCanvas (canvas) {
  canvas.width = document.body.clientWidth
  canvas.height = (document.body.clientHeight * 0.6)
  let board = canvas.getContext('2d')
  var mousePress = false
  var last = null
  function beginDraw () {
    mousePress = true
  }

  function drawing (event) {
    event.preventDefault()
    if (!mousePress) return
    var xy = pos(event)
    if (last != null) {
      board.beginPath()
      board.moveTo(last.x, last.y)
      board.lineTo(xy.x, xy.y)
      board.stroke()
    }
    last = xy
  }

  function endDraw (event) {
    mousePress = false
    event.preventDefault()
    last = null
  }

  function pos (event) {
    var x, y
    if (isTouch(event)) {
      x = event.touches[0].pageX
      y = event.touches[0].pageY
    } else {
      x = event.offsetX + event.target.offsetLeft
      y = event.offsetY + event.target.offsetTop
    }
    // log('x='+x+' y='+y);
    return {x: x, y: y}
  }

  function isTouch (event) {
    var type = event.type
    if (type.indexOf('touch') >= 0) {
      return true
    } else {
      return false
    }
  }
  board.lineWidth = 3
  board.strokeStyle = '#ca4428'

  canvas.onmousedown = beginDraw
  canvas.onmousemove = drawing
  canvas.onmouseup = endDraw
  canvas.addEventListener('touchstart', beginDraw, false)
  canvas.addEventListener('touchmove', drawing, false)
  canvas.addEventListener('touchend', endDraw, false)
}
export default { drawCanvas }
